<template>
	<view class="layout">
		<view class="head">
			<home-head></home-head>
		</view>
		<view class="body">
			<view class="swiperOut">
				<swiper vertical @change="swiperChange">
					<swiper-item v-for="(item, idx) in listData" :key="idx">
						<navigator url="/subPages/details/details" class="content">
							<soup-tab-group :soupType="idx % 2"></soup-tab-group>
							<soup-text-content :maxlines="3"></soup-text-content>
						</navigator>
						<interactive-bar></interactive-bar>
					</swiper-item>
					<swiper-item class="ad">
						<view class="notice">
							<view class="title">小主，今日鸡汤已干完！</view>
							<text class="desc">每日5碗鸡汤，如果想要加餐，\n点击下方看广告按钮，可继续推送5碗，\n每日最多加餐5次。</text>
						</view>
						<view class="btnGroup">
							<view class="btn">看广告刷新</view>
							<view class="text">今日还有5次机会</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="progress">
				<view class="line" :style="{width: lineWidth + '%'}"></view>
			</view>
		</view>
		<intro-pop :show="showPop" v-on:close="closePop"></intro-pop>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onReady
	} from '@dcloudio/uni-app'
	import {
		CacheKey
	} from '../../common/constants/constants';
	const title = ref('鸡汤来咯')
	const currentIdx = ref(0)
	const listData = ref([1, 2, 3, 4, 5])
	const lineWidth = computed(() => currentIdx.value / listData.value.length * 100)
	const showPop = ref(false)

	const swiperChange = (e) => {
		currentIdx.value = e.detail.current
	}

	const closePop = () => {
		uni.setStorageSync(CacheKey.INTRO, true)
		showPop.value = false
	}

	onReady(() => {
		showPop.value = true
	})
</script>

<style lang="scss" scoped>
	.layout {
		background: #BDE1FB;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.head {}

		.body {
			flex: 1;
			background: #fff;
			border-radius: 50rpx 50rpx 0 0;
			overflow: hidden;

			.swiperOut {
				height: calc(100% - 8rpx);

				swiper {
					height: 100%;

					&-item {
						.content {
							height: calc(100% - 130rpx);
							display: flex;
							justify-content: center;
							flex-direction: column;
							padding: 0 30rpx;
						}
					}

					.ad {
						background: #F8F8F8;
						display: flex;
						justify-content: center;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						text-align: center;
						padding: 100rpx 20rpx;

						.notice {
							background: white;
							border-radius: 30rpx;
							padding: 40rpx;


							.title {
								font-size: 46rpx;
								border-bottom: 1px solid #eee;
								padding-bottom: 20rpx;
								margin-bottom: 20rpx;
							}

							.desc {
								font-size: 32rpx;
								color: #555;
								line-height: 1.8em;

							}
						}

						.btnGroup {

							.btn {
								width: 400rpx;
								height: 100rpx;
								line-height: 100rpx;
								background: linear-gradient(to top, #93c4ff, #b1e1ff);
								font-size: 38rpx;
								border-radius: 100rpx;
								color: #203e5f;
								margin-bottom: 10rpx;
							}

							.text {
								padding: 20rpx 0;
							}
						}
					}
				}

			}

			.progress {
				width: 100%;
				height: 8rpx;
				background: #eee;

				.line {
					background: linear-gradient(to right, #BCE0FD, #74dbef);
					height: 100%;
					width: 0;
				}

			}
		}
	}
</style>